<template>
  <div class="category">
    <!-- 搜索框 -->
    <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" @click="$router.push('/home/search')" />
    <!-- 下方内容 -->
    <div class="bottom_box">
      <!-- 左边侧边栏 -->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item :title="item.name"  v-for="item in categoryList" :key="item.id"
          @click="onChange(item.id)"/>
      </van-sidebar>
      <!-- 右边盒子 -->
      <div class="right">
         <span>
                    <img :src="currentCategory.banner_url" alt="" />
                    <p class="box">{{ currentCategory.front_desc }}</p>
                </span>


                <h3>-{{ currentCategory.name }}-</h3>
                <van-grid :column-num="3">
                    <van-grid-item v-for="item in currentCategory.subCategoryList" :key="item.id"
                        :icon="item.wap_banner_url" :text="item.name" />
                </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { getCategoryData, getCurrentCategory } from "@/utils/http";
export default {
  name: "Category",
  data() {
    return {
      value: "", // 搜索关键字
      activeKey: 0, // 默认的导航索引
      categoryList: [], // 左侧导航
      currentCategory: {}, // 当前分类
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    onChange(id) {
      // 切换左边侧边导航
      // this.activeKey = index;
      console.log(id);
      getCurrentCategory({ id: id }).then((res) => {
          // console.log(res);
          this.currentCategory = res.data.data.currentCategory;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getData() {
      getCategoryData().then((res) => {
        // console.log(res);
        this.categoryList = res.data.data.categoryList;
        this.currentCategory = res.data.data.currentCategory;
      });
    },
  },
  
  created() {
    // 初始化执行
    this.getData();
  },
};
</script>
<style lang='less' scoped>
.bottom_box {
  display: flex;
  }
  .right {
    flex: 1;
    img {
      width: 100%;
      display: block;
    }
    h3 {
      text-align: center;
    }
     span{
        position: relative;
    }
  }
  .box {
    top: 37.5px;
    left: 73.5px;
    position: absolute;
    font-size: 18px;
    text-align: center;

}
</style>